<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sumup</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
</head>
<h1 align="center">考勤系统</h1>
</br>
<body>
<form class="layui-form" action="" >
    <div class="layui-inline">
        <label class="layui-form-label">日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date" placeholder="请选择日期">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="" id="dept">
                <option value="">请选择部门</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" onclick="search()"><i class="layui-icon layui-icon-search"></i>查询</button>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" onclick="exportData()"><i class="layui-icon layui-icon-export"></i>导出</button>
        </div>
    </div>
</form>

<table class="layui-hide" id="test"></table>


<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script>
    function exportData(){
        layui.use(['table'], function () {
            var $ = layui.jquery
            var username=$("#username").val()
            var usernum=$("#usernum").val()
            var date=$("#date").val()
            var dept=$("#dept").val()
            location.href = "/sumup/export?username="+username+"&usernum="+usernum+"&date="+date+"&dept="+dept
        })
    }

    function search(){
        layui.use(['table'], function () {
            var table = layui.table;
            var $ = layui.jquery
            table.reload('sumupTable',{
                url: '/department/page'
                ,where: {
                    date: $("#date").val(),
                    dept: $("#dept").val(),
                }
                ,page: {
                    curr: 1
                }
            });
        });
    }

    function getPage(){
        layui.use(['table'], function () {
            var table = layui.table;
            var $ = layui.jquery;

            table.render({
                elem: '#test'
                ,id: 'sumupTable'
                ,height: 'full-220'
                , url: '/department/page'
                ,where: {
                    date: $("#date").val(),
                    dept: $("#dept").val(),
                }
                , cols: [[
                    , {field: 'year', title: '年'}
                    , {field: 'month', title: '月'}
                    , {field: 'dept', title: '部门',minWidth: 140}
                    , {field: 'peopleNum', title: '迟到次数'}
                    , {field: 'totalUserLate', title: '总迟到次数'}
                    , {field: 'totalUserEarly', title: '总早退次数'}
                ]]
                , page: true
            });

        });
    }


    layui.use(['form','laydate', 'dropdown', 'util', 'layer'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var dropdown = layui.dropdown
            , util = layui.util
            , layer = layui.layer
            , $ = layui.jquery;


        //检查项目添加到下拉框中
        $.ajax({
            url: '/sumup/dept',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data.data, function (index, item) {
                    $("#dept").append(new Option(item,item));
                });
                form.render();
            }
        })

        //常规用法
        laydate.render({
            elem: '#date'
            ,type: 'month'
        });

        getPage();
    });
</script>

</body>

</html>